﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="SapB1WebPOS.Login"
    Title="Login" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1,initial-scale=1,user-scalable=1" />
    <title>Insert title here</title>
    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="Styles/stylesheet.css" />
    <link rel="stylesheet" type="text/css" href="Styles/ValidationEngine.css" />
    <!-- Google Font -->
    <link href="http://fonts.googleapis.com/css?family=Lato:100italic,100,300italic,300,400italic,400,700italic,700,900italic,900"
        rel="stylesheet" type="text/css">
    <!-- Bootstrap Core CSS -->
    <link type="text/css" rel="stylesheet" href="Styles/bootstrap/bootstrap.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="Scripts/html5shiv.min.js"></script>
      <script src="Scripts/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery Library -->
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="Styles/2015/kendo.common-material.min.css" type="text/css" />
    <link rel="stylesheet" href="Styles/2015/kendo.material.min.css" type="text/css" />
    <link rel="stylesheet" href="Styles/2015/kendo.dataviz.min.css" type="text/css" />
    <link rel="stylesheet" href="Styles/2015/kendo.dataviz.material.min.css" type="text/css" />
    <script src="Scripts/2015/kendo.all.min.js" type="text/javascript"></script>
    <script src="Scripts/2015/jszip.min.js" type="text/javascript"></script>
    <!-- Bootstrap Core JS -->
    <script src="Scripts/bootstrap/bootstrap.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validationEngine-en.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="Scripts/Utils.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#txtUserName").keyup(function (event) {
                if (event.keyCode == 13) {
                    $("#btnLogin").click();
                }
            });
            $("#txtPassword").keyup(function (event) {
                if (event.keyCode == 13) {
                    $("#btnLogin").click();
                }
            });

            var company = $("#CompanyList").kendoDropDownList({
                optionLabel: "[Select Company]",
                dataTextField: "cmpname",
                dataValueField: "dbname",
                dataSource: {
                    transport: {
                        read: {
                            type: "GET",
                            url: "Login.aspx/GetAllCompany",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        }
                    },
                    type: "odata", //Important!!!!
                    schema: {
                        data: function (data) {
                            if (data.d != null) {
                                return JSON.parse(data.d);
                            }
                        },
                        model: {
                            id: "dbname",
                            fields: {
                                cmpname: { type: "string" },
                                dbname: { type: "string" }
                            }
                        }
                    }
                }
            }).data("kendoDropDownList");
            $("#form1").validationEngine('attach', { promptPosition: "topRight" });
            $("#btnLogin").click(function () {
                $("#lblErrorMsg").text('');
                var valid = $("#form1").validationEngine('validate');
                if (valid == true) {
                    var companyName = $("#CompanyList").data("kendoDropDownList").text();
                    var companyDB = $("#CompanyList").data("kendoDropDownList").value();
                    if (companyDB == '') {
                        $("#lblErrorMsg").text("Please select company.");
                        return;
                    }
                    var usr = $("#txtUserName").val();
                    var pass = $("#txtPassword").val();
                    $.ajax({
                        type: "POST",
                        url: "Login.aspx/GetLogin",
                        data: '{"userName":"' + usr + '","passWord":"' + pass + '","companyDB":"' + companyDB + '","companyName":"' + companyName + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            if (data.d == "SUCCESS") {
                                window.location.href = "Default.aspx";
                            }
                            else {
                                $("#lblErrorMsg").text(data.d);
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            if (jqXHR.status == 500) {
                                alert('Internal error: ' + jqXHR.responseText);
                            } else {
                                alert('Unexpected error.' + jqXHR.responseText);
                            }
                        }
                    });
                }
            });
        });
    </script>
    <style type="text/css">
        .k-picker-wrap .k-input, .k-numeric-wrap .k-input, .k-dropdown-wrap .k-input, .k-selectbox .k-input
        {
            font-family: initial;
            color: #C1C4C5;
            border-width: 0;
            outline: 0;
        }
        form[role=login] input
        {
            margin: 5px 0;
            border-radius: 0px;
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
        }
        .btn-block
        {
            display: block;
            width: 100%;
            height: 50px;
        }
        .btn-info
        {
            color: #fff;
            background-color: #3F51B5;
            border-color: #3F51B5;
        }
        .k-dropdown .k-state-default
        {
            border-color: #CCCCCC;
            background-image: none;
            background-position: 50% 50%;
            background-color: #fff;
            border-radius: 0px;
        }
        .input-lg, .form-horizontal .form-group-lg .form-control
        {
            border-radius: 0px;
        }
        .btn-lg, .btn-group-lg > .btn
        {
            border-radius: 0px;
        }
    </style>
</head>
<body>
    <section class="container">
	    <section class="login-form">
		<form  role="login"  runat="server" id="form1">
			<div>
				<%--<img src="images/sapb1.png" alt="" />--%>
                <img src="Logo/logo.png" alt="" />
				<h4>Login to SAP B1 system.</h4>
			</div>			
			<input type="text" name="txtUserName" id="txtUserName" placeholder="Username" required class="form-control input-lg validate[required]"  />
			<input type="password" name="txtPassword"  id="txtPassword" placeholder="Password" required class="form-control input-lg validate[required]" />
              <input type="text" name="CompanyList" id="CompanyList" style="width:100%;" />
			<button type="button" name="btnLogin" id="btnLogin" class="btn btn-lg btn-block btn-info" style="margin-top:5px;">Log in</button>
			<div>
            <label>
            <span id="lblErrorMsg" style="color: Red; font-size: 10pt;"></span>
            </label>
			</div>
		</form>
		</section>
	</section>
</body>
</html>
